<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
</head>
<body>
	<div class="container">
	  <ul class="item item1">
	  </ul>
	   <ul class="item item2">
	  </ul>
	   <ul class="item item3">
	  </ul>
	   <ul class="item item4">
	  </ul>
	   <ul class="item item5">
	  </ul>
	   <ul class="item item6">
	  </ul>
	</div>

</body>
</html>
<style type="text/css">
    html,body,ul{margin:0;padding:0;}
	.container{
		height:200px;
		width:300px;
		border:2px dashed #000;
		position:relative;
		margin:0 auto;
	}
	.item{
		width:100%;
		height:200px;
		background-color:#333;
		position:absolute;
	}
	.item1{background-color:red;right:600px;top:0;}
	.item2{background-color:blue;right:300px;top:0;}
	.item3{background-color:yellow;right:0px;top:0;}
	.item4{background-color:green;right:-300px;top:0;}
	.item5{background-color:gray;right:-600px;top:0;}
	.item6{background-color:#000;right:-900px;top:0;}
</style>
<script type="text/javascript">
	function cp(len){
		let ha=Math.ceil(len/2),re=len%2,w=100,p=[0];
		for(let i=1;i<ha;i++){
			p.push(i*w);
			p.unshift(-i*w);
		}
		if(!re){p.push(ha*w)}
		console.log(p)
	}
	cp(9);
</script>